<template>
    <div class="app-container">
        <div class="return">
            <router-link to="/orderer">返回</router-link>
        </div>

        <el-card class="operate-container" shadow="never" style="margin-top: 50px;">
            <i class="el-icon-tickets"></i>
            <span>发货列表</span>
        </el-card>
        <div class="table-container" style="margin-top:20px">
            <el-table ref="deliverOrderTable" :data="[list]" style="width: 100%;" border>
                <el-table-column label="订单编号" width="150" align="center">
                    <template v-slot:default="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column label="收货人" width="100" align="center">
                    <template v-slot:default="scope">{{ scope.row.receiptInfo.name }}</template>
                </el-table-column>
                <el-table-column label="手机号码" width="160" align="center">
                    <template v-slot:default="scope">{{ scope.row.receiptInfo.phoneNumber }}</template>
                </el-table-column>
                <el-table-column label="收货地址" align="center">
                    <template v-slot:default="scope">{{ scope.row.receiptInfo.address }}</template>
                </el-table-column>
                <el-table-column label="配送方式" width="120" align="center">
                    <template v-slot:default="scope">
                        <el-select placeholder="请选择物流公司" v-model="scope.row.deliveryCompany" size="small">
                            <el-option v-for="item in companyOptions" :key="item" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="物流单号" width="170" align="center">
                    <template v-slot:default="scope">
                        <el-input size="small" v-model="scope.row.deliverySn"></el-input>
                    </template>
                </el-table-column>
            </el-table>

            <div style="margin-top: 15px;text-align: center">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="this.deliverOrder()" type="primary">确定</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { GetSupplierOrderDetail, SupplierDeliverOrder } from "../../../wailsjs/go/pkg/User"
const defaultLogisticsCompanies = ["顺丰快递", "圆通快递", "中通快递", "韵达快递", "邮政快递", "申通快递"];
export default {
    name: 'deliverOrderList',
    data() {
        return {
            list: {},
            companyOptions: defaultLogisticsCompanies
        }
    },
    created() {
        this.getOrderDetail()
    },
    methods: {
        getOrderDetail() {
            console.log(this.$route.params.orderid);
            GetSupplierOrderDetail(localStorage.getItem("supplier_email"), this.$route.params.id, localStorage.getItem("supplier_token")).then((rep) => {
                console.log(rep);
                if (rep.code == 401) {
                    this.$router.push("/login")
                }
                this.list = rep.data
            }).catch((rep) => {
                console.log(rep);
            })
        },
        cancel() {
            liver
            this.$router.push("/orderer")
        },
        deliverOrder() {
            if (this.list.deliverySn.lenght == 0 || this.list.deliveryCompany.lenght == 0) {
                this.$notify.info({
                    title: '系统信息',
                    message: '订单物流或订单编号不能为空',
                })
                return
            }
            console.log(this.list.deliverySn);
            console.log(this.list.deliveryCompany);
            SupplierDeliverOrder(localStorage.getItem("supplier_email"), this.list.orderSn, this.list.deliveryCompany, this.list.deliverySn, localStorage.getItem("supplier_token")).then((rep) => {
                console.log(rep);
            }).catch((rep) => {
                console.log(rep);
            })
        }
    }
}
</script>
<style>
.app-container {
    margin-top: 40px;
    margin-left: 120px;
    margin-right: 120px;
    -webkit-user-select: none;
    /*webkit浏览器*/
    -khtml-user-select: none;
    /*早期浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
}

.total-layout {
    margin-top: 40px;
    cursor: pointer;
}

.total-frame {
    border: 1px solid #DCDFE6;
    padding: 20px;
    height: 100px;
    -webkit-user-select: none;
    /*webkit浏览器*/
    -khtml-user-select: none;
    /*早期浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
}

.total-icon {
    color: #409EFF;
    width: 60px;
    height: 60px;
}

.total-title {
    text-align: center;
}

.total-value {
    text-align: center;
}

.un-handle-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
}

.layout-title {
    color: #606266;
    padding: 15px 20px;
    background: #F2F6FC;
    font-weight: bold;
}

.un-handle-content {
    padding: 20px 40px;
}

.un-handle-item {
    border-bottom: 1px solid #EBEEF5;
    padding: 10px;
}

.overview-layout {
    margin-top: 20px;
}

.overview-item-value {
    font-size: 24px;
    text-align: center;
}

.overview-item-title {
    margin-top: 10px;
    text-align: center;
}

.out-border {
    border: 1px solid #DCDFE6;
}

.statistics-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
}

.mine-layout {
    position: absolute;
    right: 140px;
    top: 107px;
    width: 250px;
    height: 235px;
}

.address-content {
    padding: 20px;
    font-size: 18px
}

.pagination-container {
    display: flex;
    /* 使用 Flexbox 布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}
</style>


